<template>
  <div id="app">
    <div v-if="showVideo" class="video-container">
      <video ref="videoPlayer" @ended="onVideoEnd">
        <source src="/2024-11-17.mp4" type="video/mp4">
      </video>
      <button @click="playVideo">Play Video</button>
    </div>
    <div v-else class="content-container">
      <div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
        <h1>Welcome to My Vue App!</h1>
      </div>
    </div>
    <audio ref="audioPlayer1" src="/2024-11-17.mp3"></audio>
    <audio ref="audioPlayer2" src="/2024-11-17-1.mp3"></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showVideo: true,
      isAudio1Muted: true,
      isAudio2Muted: true
    };
  },
  methods: {
    onVideoEnd() {
      this.showVideo = false;
    },
    playVideo() {
      const video = this.$refs.videoPlayer;
      const audio1 = this.$refs.audioPlayer1;
      const audio2 = this.$refs.audioPlayer2;

      if (video && audio1 && audio2) {
        video.play().catch(error => {
          console.error('Error playing video:', error.message, error.stack);
        });

        audio1.play().catch(error => {
          console.error('Error playing audio 1:', error.message, error.stack);
        });

        audio2.play().catch(error => {
          console.error('Error playing audio 2:', error.message, error.stack);
        });
      }
    },
  },
  mounted() {
    // 页面加载时自动播放视频和音频
    this.playVideo();

    // 视频加载完毕后请求全屏
    this.$refs.videoPlayer.addEventListener('loadeddata', () => {
      const video = this.$refs.videoPlayer;
      video.play().then(() => {
        // 请求全屏
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) { // Firefox
          video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
          video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) { // IE/Edge
          video.msRequestFullscreen();
        }
      }).catch(error => {
        console.error('Error playing video:', error.message, error.stack);
      });
    });
  },
  beforeUnmount() {
    // 移除事件监听器
    if (this.$refs.videoPlayer) {
      this.$refs.videoPlayer.removeEventListener('loadeddata', this.unmuteVideo);
    }
  }
};
</script>